revision:
used to draw circles based on a center point and a radius.
attributes: cx, cy, r, pathlength
starting with SVG2, cx, cy, and r are "Geometry Properties", meaning those attributes can also be used as CSS properties for that element.
codes:
<svg viewBox="0 0 100 50">
<circle cx="40" cy="20" r="20"/>
</svg>
used to create ellipses based on a center coordinate, and both their x and y radius.
attributes: cx, cy, rx, ry, pathlength
starting with SVG2, cx, cy, rx and ry are "Geometry Properties", meaning those attributes can also be used as CSS properties for that element.
codes:
<svg height="180" width="500">
<ellipse cx="200" cy="80" rx="150" ry="70" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
used to create a line connecting two points.
attributes: x1, x2, y1, y2, pathlength
codes:
<svg viewBox="0 0 100 60">
<line x1="0" y1="60" x2="90" y2="10" stroke="blue"/>
</svg>
the <path> element is used to define a path. It is the generic element to define a shape. All the basic shapes can be created with a path element.
The following commands are available for path data:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.
attributes: d, pathlength
codes:
<svg viewBox="0 0 100 90">
<path d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z"/>
</svg>
defines a closed shape consisting of a set of connected straight line segments. The last point is connected to the first point.
attributes: points, pathlength
codes:
<svg viewBox="0 0 200 100">
<!-- Example of a polygon with the default fill -->
<polygon points="0,100 50,25 50,75 100,0" />
<!-- Example of the same polygon shape with stroke and no fill -->
<polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>
creates straight lines connecting several points. Typically a polyline is used to create open shapes as the last point doesn't have to be connected to the first point.
attributes: points, pathlength
codes:
<svg viewBox="0 0 200 100">
<!-- Example of a polyline with the default fill -->
<polyline points="0,100 50,25 50,75 100,0" />
<!-- Example of the same polyline shape with stroke and no fill -->
<polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="darkgreen" />
</svg>
draws rectangles, defined by their position, width, and height. The rectangles may have their corners rounded.
attributes: x, y, width, height, rx, ry, pathlength
starting with SVG2, x, y, width, height, rx and ry are "Geometry Properties", meaning those attributes can also be used as CSS properties for that element.
codes:
<svg viewBox="0 0 220 100">
<!-- Simple rectangle -->
<rect width="100" height="100"/>
<!-- Rounded corner rectangle -->
<rect x="120" width="100" height="100" rx="15" />
</svg>